<template>
    <div class="common-layout">
        <el-container
                class="layout-container-demo"
        >
            <el-header style="background: #67c23a">
                <el-row>
                    <el-col :span="2">
                        <span @click="toHome" class="pointer">Bug Solver</span>
                    </el-col>
                    <el-col :span="12">


                    </el-col>
                    <el-col :span="5">
                        <el-input v-model="searchContent" placeholder="请输入搜索内容"
                                  prefix-icon="Search">

                        </el-input>
                    </el-col>
                    <el-col :span="1">
                        <el-button type="primary" @click="searchBug()">搜索</el-button>
                    </el-col>
                    <el-col :span="1">
                        <el-button :style="{display: loginHidden}" type="primary" @click="login">登录</el-button>
                    </el-col>
                    <el-col :span="1">
                        <el-icon :style="{display: messageHidden}" class="icon pointer">
                            <bell-filled/>
                        </el-icon>
                    </el-col>
                    <el-col :span="1">
                        <el-dropdown style="margin-top: 16px;color: azure" class="icon pointer">
                    <span class="el-dropdown-link">
                      <el-icon :style="{display: messageHidden}">
                         <avatar/>
                       </el-icon>
                    </span>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item @click="usercenter">个人主页</el-dropdown-item>
                                    <el-dropdown-item @click="logout()">退出</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </el-col>
                    <el-col :span="1">

                        <el-dropdown style="margin-top: 16px;color: azure" class="icon pointer">
                    <span class="el-dropdown-link">
                        <el-icon :style="{display: messageHidden}">
                            <setting/>
                        </el-icon>
                    </span>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item>Action 1</el-dropdown-item>
                                    <el-dropdown-item>Action 2</el-dropdown-item>
                                    <el-dropdown-item>Action 3</el-dropdown-item>
                                    <el-dropdown-item disabled>Action 4</el-dropdown-item>
                                    <el-dropdown-item divided>Action 5</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </el-col>
                </el-row>
            </el-header>
            <router-view></router-view>
            <el-container class="container" v-show="home">
                <el-aside>
                    <el-card class="box-card">

                        <template #header>
                            <div class="card-header">
                                <span>BUG分类</span>
                            </div>
                        </template>

                        <el-tree :data="bugCategory"
                                 :props="defaultProps"
                                 :node-key="id"
                                 v-model="pageListCondition.category"
                                 highlight-current="true"
                                 style="font-size: 14px"
                                 @node-click="handleNodeClick"
                        />

                    </el-card>
                </el-aside>
                <el-main>
                    <el-card shadow="always">
                        <!--                        <template #header>-->
                        <div class="card-header">

                            <el-row>
                                <el-col :span="12"><H2>BUG记录</H2></el-col>
                                <el-col :span="12" style="text-align: right;padding-top: 30px;padding-right: 50px;">
                                    <el-link type="primary" @click="askQuestion()"
                                             style="font-size: 20px;color: #67c23a">我要提问
                                    </el-link>
                                </el-col>
                            </el-row>
                            <div>
                                <div style="float: left">
                                    共&nbsp;<span style="color: #67c23a">{{total}}</span>&nbsp;条
                                </div>

                                <div style="text-align: right;margin-right: 40px;color: #67c23a">
                                    <el-button-group>
                                        <el-button type="success" @click="selectCondition('latest')">最新
                                        </el-button>
                                        <el-button type="success" @click="selectCondition('views')">最多查看
                                        </el-button>
                                        <el-button type="success" @click="selectCondition('answers')">最多回答
                                        </el-button>
                                        <!--                                        <el-button type="success" @click="selectCondition('asked')">未回答-->
                                        <!--                                        </el-button>-->
                                        <!--                                        <el-button type="success" @click="selectCondition('closed')">已关闭-->
                                        <!--                                        </el-button>-->
                                    </el-button-group>
                                </div>
                            </div>
                        </div>
                        <el-divider/>
                        <el-scrollbar>
                            <ul v-infinite-scroll="loadBugPageList"

                                class="infinite-list" style="width: 100%">

                                <li v-if="bugList.length === 0">
                                    <el-empty description="No Data"/>
                                </li>
                                <li v-else v-for="bug in bugList" :key="bug" class="infinite-list-item pointer"
                                    @click="bugDetail(bug)">
                                    <el-card style="width: 100%;">

                                        <el-row>
                                            <el-col :span="24"><h3> &nbsp;{{bug.title}}</h3></el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="24">{{bug.description}}</el-col>
                                        </el-row>

                                        <el-row justify="end" style="width: 100%">

                                            <el-col :span="4" style="margin-top: 10px;">
                                                <el-space wrap>
                                                    &nbsp;
                                                    <el-icon style="margin-top: 4px;color: #67c23a">
                                                        <View/>
                                                    </el-icon>
                                                    <span style="margin-top: 4px;color: #67c23a">{{bug.views}}</span>
                                                </el-space>
                                                &nbsp;&nbsp;
                                                <el-space wrap>
                                                    <el-icon style="margin-top: 4px;color: #67c23a">
                                                        <chat-round/>
                                                    </el-icon>
                                                    <span style="margin-top: 4px;color: #67c23a">{{bug.answers}}</span>
                                                </el-space>
                                            </el-col>
                                            <el-col :span="8" style="margin-top: 10px;">
                                                <el-space wrap>
                                                    <el-tag
                                                            v-for="item in bug.categoriesName"
                                                            :key="item"
                                                            type="warning"
                                                            effect="plain"
                                                    > {{ item }}
                                                    </el-tag>
                                                </el-space>
                                            </el-col>
                                            <el-col :span="12" style="margin-top: 10px;">
                                                <span style="color: #67c23a">{{"「"+bug.nickname +"」于 "+ bug.createTimeStr + " 提出该问题"}} </span>
                                            </el-col>

                                        </el-row>

                                    </el-card>
                                </li>
                                <el-divider v-if="disabledScroll">没有更多了</el-divider>
                            </ul>
                        </el-scrollbar>
                        <!--                        </template>-->
                    </el-card>

                </el-main>
                <el-aside>
                    <el-card class="box-card">

                        <template #header>
                            <div class="card-header">
                                <span>语言bug趋势</span>
                            </div>
                        </template>

                    </el-card>

                    <el-card class="box-card">

                        <template #header>
                            <div class="card-header">
                                <span>组件bug趋势</span>
                            </div>
                        </template>

                    </el-card>

                    <el-card class="box-card">

                        <template #header>
                            <div class="card-header">
                                <span>数据库bug趋势</span>
                            </div>
                        </template>

                    </el-card>
                </el-aside>
            </el-container>

            <el-footer>
                <div class="footer">footer
                </div>
            </el-footer>
        </el-container>

        <el-dialog
                v-model="loginDialogVisible"
                title="欢迎登陆"
                width="15%"
                top="350px"
        >
          <span class="dialog-footer">

           <el-form ref="loginForm" :model="form" :rules="rules" v-loading="loading" class="login-box"
                    style="display: inline-block">
              <el-form-item prop="username">
                <el-input type="text" placeholder="请输入账号" v-model="form.username"/>
              </el-form-item>
              <el-form-item prop="password">
                <el-input type="password" placeholder="请输入密码" v-model="form.password"/>
              </el-form-item>

               <el-button type="primary" v-on:click="onSubmit('loginForm')" style="width:100%">登录</el-button>
               <div style="float:left;">
                   <el-link type="primary" @click="register">注册</el-link>
               </div>
               <div style="text-align: right">
                   <el-link type="primary" style="text-align: right">忘记密码</el-link>
               </div>

               <div class="demo-type" style="margin-top: 30px">
                    <div style="float:left;margin-left: 30px">
                      <el-avatar :size="30" :src="wechatImgUrl" class="pointer" @click="wechatLogin"></el-avatar>
                    </div>
                   <div style="float:right;margin-right: 30px">
                      <el-avatar :size="30" :src="giteeImgUrl" class="pointer" @click="giteeLogin"></el-avatar>
                    </div>
               </div>
            </el-form>
          </span>
        </el-dialog>

        <el-drawer
                v-model="askQuestionDialogVisible"
                :with-header="false"
                size="70%"
                :destroy-on-close="true"
        >
            <el-row>
                <el-col :span="22">
                    <el-input v-model="title" placeholder="请输入标题" id="question_title"/>
                </el-col>
                <el-col :span="1" style="margin-top: 15px; margin-left: 10px;">
                    <el-button type="primary" size="large" @click="publish">发布</el-button>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-tree-select v-model="selectType" :data="bugCategory" style="width:100%;" placeholder="请选择类型"
                                    multiple/>
                </el-col>
            </el-row>
            <el-row style="margin-top: 5px;">
                <el-col :span="24">
                    <el-input
                            v-model="description"
                            :rows="4"
                            type="textarea"
                            placeholder="请输入描述"
                            maxlength="400"
                            show-word-limit
                    />
                </el-col>
            </el-row>
            <md-editor id="question_description"
                       style="margin-top: 5px;"
                       :toolbarsExclude="['save']"
                       v-model="text"
                       @onUploadImg="onUploadImg"
            />
        </el-drawer>

        <el-drawer
                v-model="detailDialogVisible"
                size="80%"
                :with-header="false"
                :destroy-on-close="true"
        >

            <el-row>
                <el-col :span="24">
                    <div class="grid-content bg-purple-dark"></div>
                </el-col>
            </el-row>
            <p style="font-size: 30px;text-align: left;text-indent: 30px">{{detailTitle}}</p>

            <el-timeline>
                <el-timeline-item v-for="(activity, index) in detailList"
                                  :key="index"
                                  :timestamp="activity.userAction" placement="top">
                    <el-card>
                        <md-editor
                                v-model="activity.content"
                                previewOnly
                        />


                        <div style="text-align: right;margin-right: 20px">
                            <el-row>
                                <el-col :span="19"></el-col>
                                <el-col :span="2" v-if="activity.acceptNum != null">

                                    <el-row>
                                        <el-col :span="12">
                                            <el-tooltip
                                                    class="box-item"
                                                    effect="dark"
                                                    content="采纳"
                                                    placement="bottom"
                                            >
                                                <el-button v-if="activity.currentHasAccept" type="success" circle
                                                           @click="acceptAnswer(activity)" :disabled="codeDisabled">
                                                    <el-icon>
                                                        <check/>
                                                    </el-icon>
                                                </el-button>
                                                <el-button v-else type="success" circle @click="acceptAnswer(activity)"
                                                           :disabled="codeDisabled" plain>
                                                    <el-icon>
                                                        <check/>
                                                    </el-icon>
                                                </el-button>

                                            </el-tooltip>
                                        </el-col>
                                        <el-col :span="12" style="text-align: left">
                                            <span style="font-size:25px;margin-top: 4px;color: #67c23a">{{ activity.acceptNum }}</span>
                                        </el-col>
                                    </el-row>
                                </el-col>
                                <el-col :span="2" v-else>
                                </el-col>
                                <el-col :span="2" v-if="activity.rejectNum != null">
                                    <el-row>
                                        <el-col :span="12">
                                            <el-tooltip
                                                    class="box-item"
                                                    effect="dark"
                                                    content="无用"
                                                    placement="bottom"
                                            >
                                                <el-button v-if="activity.currentHasReject" type="warning" circle
                                                           @click="rejectAnswer(activity)" :disabled="codeDisabled">
                                                    <el-icon>
                                                        <close/>
                                                    </el-icon>
                                                </el-button>
                                                <el-button v-else type="warning" circle @click="rejectAnswer(activity)"
                                                           :disabled="codeDisabled" plain>
                                                    <el-icon>
                                                        <close/>
                                                    </el-icon>
                                                </el-button>
                                            </el-tooltip>
                                        </el-col>
                                        <el-col :span="12" style="text-align: left">
                                            <span style="font-size:25px;margin-top: 4px;color: #E6A23C">{{ activity.rejectNum }}</span>
                                        </el-col>
                                    </el-row>
                                </el-col>
                                <el-col :span="2" v-else>
                                </el-col>
                                <el-col :span="1">
                                    <el-tooltip
                                            class="box-item"
                                            effect="dark"
                                            content="回复"
                                            placement="bottom"
                                    >
                                        <el-icon @click="answerQuestion(activity)" class="pointer" :size="30"
                                                 color="#409EFF">
                                            <chat-dot-square/>
                                        </el-icon>
                                    </el-tooltip>
                                </el-col>
                            </el-row>
                        </div>
                    </el-card>
                </el-timeline-item>

                <el-card v-show="answerQuestionDialogVisible">
                    <template #header>
                        <div class="card-header" style="flex-direction: inherit;font-size: 20px">
                            <span>回复「{{ beAnsweredNickname }}」：</span>
                            <el-button type="primary" @click="commitAnswer">提交</el-button>
                        </div>
                    </template>
                    <md-editor id="answer_question"
                               v-model="answerText"
                               @onUploadImg="onUploadImg"
                               :toolbarsExclude="['save']"
                    />
                </el-card>
            </el-timeline>

        </el-drawer>

        <el-dialog
                v-model="registerDialogVisible"
                title="注册"
                width="15%"
                top="350px"
        >
          <span class="dialog-footer">

           <el-form ref="registererForm" :model="registerForm" :rules="registerRules" class="login-box"
                    style="display: inline-block">

              <el-form-item prop="username">
                <el-input type="text" placeholder="请输入账号" v-model="registerForm.username"/>
              </el-form-item>
              <el-form-item prop="password">
                <el-input type="password" placeholder="请输入密码" v-model="registerForm.password"/>
              </el-form-item>
              <el-form-item prop="email">
                <el-input type="text" placeholder="请输入邮箱" v-model="registerForm.email"/>
              </el-form-item>
               <el-button type="primary" v-on:click="registerAndLogin('registererForm')"
                          style="width:100%">注册并登录</el-button>
            </el-form>
          </span>
        </el-dialog>
    </div>

</template>

<script>
    import wechatImgUrl from '../../assets/wechat.png'
    import giteeImgUrl from '../../assets/gitee.png'
    import MdEditor from 'md-editor-v3';
    import 'md-editor-v3/lib/style.css';
    import {ElMessage, ElNotification} from 'element-plus'
    import {login, logout, register} from '../../api/login'
    import {getMurmur, getToken, getUsername, removeToken, setMurmur, setToken, setUsername} from '../../utils/auth'
    import Fingerprint2 from 'fingerprintjs2'
    import {getCategoryTree} from "../../api/category";
    import {fullTextRetrieval, pageList, saveBug} from "../../api/bugRecord";
    import {list, saveAnswer, updateAcceptReject} from "../../api/bugAnswered";
    import {uploadImp} from "../../api/file";
    import {h} from "@vue/runtime-core";
    import router from "../../router/index";

    export default {
        components: {MdEditor},

        data() {
            return {
                codeDisabled: false,
                home: true,
                beAnsweredUsername: null,
                beAnsweredNickname: null,
                disabledScroll: false,
                detailList: [],
                detailId: null,
                detailTitle: null,
                answerText: '',
                total: 0,
                pageListCondition: {
                    category: null,
                    searchCondition: null,
                    limit: 5,
                    page: 0,
                    description: null
                },
                selectType: [],
                webSocketUrl: process.env.VUE_APP_WEBSOCKET_URL,
                murmur: "",
                loading: false,
                title: "",
                searchContent: '',
                text: '',
                description: '',
                bugList: [],
                wechatImgUrl: '',
                giteeImgUrl: '',
                registerForm: {
                    username: '',
                    password: '',
                    email: ''
                },

                // 表单验证，需要在 el-form-item 元素中增加 prop 属性
                registerRules: {
                    username: [
                        {required: true, message: '账号不可为空', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '密码不可为空', trigger: 'blur'}
                    ],
                    email: [
                        {required: true, message: '邮箱不可为空', trigger: 'blur'}
                    ]
                },
                form: {
                    username: '',
                    password: ''
                },

                // 表单验证，需要在 el-form-item 元素中增加 prop 属性
                rules: {
                    username: [
                        {required: true, message: '账号不可为空', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '密码不可为空', trigger: 'blur'}
                    ]
                },
                userCenterDialogVisible: false,
                answerQuestionDialogVisible: false,
                askQuestionDialogVisible: false,
                detailDialogVisible: false,
                loginDialogVisible: false,
                registerDialogVisible: false,
                loginHidden: '',
                messageHidden: 'none',

                bugCategory: null,
                username: ""
            }
        },
        mounted() {
            this.wechatImgUrl = wechatImgUrl;
            this.giteeImgUrl = giteeImgUrl;

            // this.bugPageList();

            if (getToken() && getUsername()) {
                this.loginHidden = 'none';
                this.messageHidden = '';
            }
            this.getCategoryTree();
            this.initWebSocket();

            this.username = getUsername() === null ? "" : getUsername();

            if (window.location.href.includes('usercenter')) {
                this.home = false;
            }

            this.getMurmur();
        },
        methods: {
            searchBug() {
                this.bugPageList();
            },
            toHome() {
                this.home = true;
                router.push("/");
            },
            commitAnswer() {
                saveAnswer({
                    bugId: this.detailId,
                    content: this.answerText,
                    username: getUsername(),
                    beAnsweredUsername: this.beAnsweredUsername
                }).then((res) => {
                    if (res.code === 0) {
                        let data = res.data;
                        this.answerQuestionDialogVisible = false;
                        let detailAnswered = {};
                        detailAnswered.id = data.id;
                        detailAnswered.username = getUsername();
                        detailAnswered.content = this.answerText;
                        detailAnswered.userAction = '「' + res.data.nickname + '」于 ' + res.data.createTimeStr + ' 回复' + '「' + res.data.beAnsweredNickname + '」';
                        detailAnswered.acceptNum = 0;
                        detailAnswered.rejectNum = 0;
                        detailAnswered.nickname = res.data.nickname;
                        detailAnswered.beAnsweredNickname = res.data.beAnsweredNickname
                        this.detailList.push(detailAnswered);


                        ElNotification({
                            title: 'Success',
                            message: '回复成功',
                            type: 'success'
                        })
                    }
                })
            },

            selectCondition(str) {
                this.pageListCondition.searchCondition = str;
                this.bugPageList();
            },
            bugPageList() {
                this.pageListCondition.page = 1;
                this.disabledScroll = false;
                this.pageListCondition.description = this.searchContent;
                pageList(this.pageListCondition).then((res) => {
                    if (res.code === 0) {
                        this.bugList = res.data.records;
                        this.total = res.data.total;
                        if (res.data.records.length < this.pageListCondition.limit) {
                            this.disabledScroll = true
                        }
                    }
                });
            },
            loadBugPageList() {
                this.pageListCondition.page += 1;
                pageList(this.pageListCondition).then((res) => {
                    if (res.code === 0) {
                        if (res.data.records.length !== 0) {
                            this.bugList = this.bugList.concat(res.data.records);
                            this.total = res.data.total;
                        } else {
                            this.disabledScroll = true
                            this.pageListCondition.page -= 1;
                        }
                    }
                });
            },
            async onUploadImg(files, callback) {
                const res = await Promise.all(
                    Array.from(files).map((file) => {
                        return new Promise((rev, rej) => {
                            const form = new FormData();
                            form.append('multipartFile', file);
                            uploadImp(form).then((res) => {
                                if (res.code === 0) {
                                    callback(res.data);
                                }
                            }).catch((error) => rej(error));
                        });
                    })
                );

                callback(
                    res.map((item) => item.data)
                );
            },
            getCategoryTree() {
                getCategoryTree().then((res) => {
                    if (res.code === 0) {
                        this.bugCategory = res.data;
                    }
                });
            },
            //获取浏览器唯一标识
            getMurmur() {
                Fingerprint2.get(function (components) {
                    const values = components.map(function (component, index) {
                        if (index === 0) { //把微信浏览器里UA的wifi或4G等网络替换成空,不然切换网络会ID不一样
                            return component.value.replace(/\bNetType\/\w+\b/, '')
                        }
                        return component.value
                    })
                    // 生成最终id murmur
                    setMurmur(Fingerprint2.x64hash128(values.join(''), 31))
                });
            },
            //初始化websocket
            initWebSocket() {
                this.getMurmur();
                const wsUri = this.webSocketUrl + getMurmur();
                this.websock = new WebSocket(wsUri);
                this.websock.onmessage = this.websocketonmessage;
                this.websock.onopen = this.websocketonopen;
                this.websock.onerror = this.websocketonerror;
                this.websock.onclose = this.websocketclose;
            },
            websocketonopen() { //连接建立之后执行send方法发送数据
                let actions = {"用户账号": getMurmur()};
                this.websocketsend(JSON.stringify(actions));
            },
            websocketonerror() {//连接建立失败重连
                this.initWebSocket();
            },
            websocketonmessage(e) { //数据接收
                const redata = JSON.parse(e.data);
                if (redata.code === 0) {
                    this.loading = false,
                        this.loginHidden = 'none';
                    this.messageHidden = '';
                    this.loginDialogVisible = false;
                    setToken(redata.data.token);
                    setUsername(redata.data.username)
                    this.username = redata.data.username;
                } else if (redata.code === 500) {
                    ElNotification({
                        title: 'Error',
                        message: redata.msg,
                        type: 'error',
                    })
                    this.loading = false
                }
            },
            websocketsend(Data) {//数据发送
                this.websock.send(Data);
            },
            websocketclose(e) {  //关闭
                console.log('断开连接', e);
            },
            usercenter() {
                // this.userCenterDialogVisible = true;
                this.home = false;
                router.push("usercenter")
            },
            publish() {

                if (!this.title) {
                    ElMessage.error('请输入标题');
                    return;
                }
                if (this.selectType.length === 0) {
                    ElMessage.error('请选择类型');
                    return;
                }
                if (!this.description) {
                    ElMessage.error('请输入描述');
                    return;
                }
                if (!this.text) {
                    ElMessage.error('请输入内容');
                    return;
                }
                this.askQuestionDialogVisible = false;
                saveBug({
                    title: this.title,
                    description: this.description,
                    content: this.text,
                    username: getUsername(),
                    category: this.selectType.join(",")

                }).then((res) => {
                    if (res.code === 0) {
                        ElNotification({
                            title: 'Success',
                            type: 'success',
                            message: '发布成功',
                        })
                        this.text = '';
                        this.description = '';
                        this.title = '';
                        this.selectType = [];
                        this.bugPageList();
                    }
                });
            },
            askQuestion() {
                // 如果没油登录用户信息，就跳出登录界面重新登录
                if (!getUsername() || !getToken()) {
                    this.loginDialogVisible = true;
                    this.registerDialogVisible = false;
                } else {
                    // 有登录信息，展示信息输入框
                    this.askQuestionDialogVisible = true;


                }
            },
            rejectAnswer(answer) {
                this.codeDisabled = true;
                if (!getUsername() || !getToken()) {
                    this.loginDialogVisible = true;
                    this.registerDialogVisible = false;
                    this.codeDisabled = false;
                } else {
                    answer.bugId = this.detailId;
                    answer.flag = 'reject';
                    answer.username = getUsername();
                    updateAcceptReject(answer).then((res) => {
                        if (res.code === 0) {
                            for (let i = 0; i < this.detailList.length; i++) {
                                if (this.detailList[i].id === answer.id) {
                                    if (this.detailList[i].currentHasReject) {
                                        this.detailList[i].currentHasReject = false;
                                        this.detailList[i].rejectNum -= 1;
                                    } else {
                                        this.detailList[i].currentHasReject = true;
                                        this.detailList[i].rejectNum += 1;
                                        if (this.detailList[i].currentHasAccept) {
                                            this.detailList[i].currentHasAccept = false;
                                            this.detailList[i].acceptNum -= 1;
                                        }
                                    }
                                    this.codeDisabled = false;
                                    return;
                                }
                            }
                        }
                    })
                }
            },
            acceptAnswer(answer) {
                this.codeDisabled = true;
                if (!getUsername() || !getToken()) {
                    this.loginDialogVisible = true;
                    this.registerDialogVisible = false;
                    this.codeDisabled = false;
                } else {
                    answer.bugId = this.detailId;
                    answer.flag = 'accept';
                    answer.username = getUsername();
                    updateAcceptReject(answer).then((res) => {
                        if (res.code === 0) {
                            for (let i = 0; i < this.detailList.length; i++) {
                                if (this.detailList[i].id === answer.id) {
                                    if (this.detailList[i].currentHasAccept) {
                                        this.detailList[i].currentHasAccept = false;
                                        this.detailList[i].acceptNum -= 1;
                                    } else {
                                        this.detailList[i].currentHasAccept = true;
                                        this.detailList[i].acceptNum += 1;
                                        if (this.detailList[i].currentHasReject) {
                                            this.detailList[i].currentHasReject = false;
                                            this.detailList[i].rejectNum -= 1;
                                        }
                                    }
                                    this.codeDisabled = false;
                                    return;
                                }
                            }
                        }
                    })
                }
            },
            // 回复
            answerQuestion(data) {
                this.answerText = '';
                if (!getUsername() || !getToken()) {
                    this.loginDialogVisible = true;
                    this.registerDialogVisible = false;
                } else {
                    this.beAnsweredUsername = data.username;
                    this.beAnsweredNickname = data.nickname;
                    // 有登录信息，展示信息输入框
                    this.answerQuestionDialogVisible = true;
                }
            },
            bugDetail(bug) {
                this.detailList = [];
                this.answerQuestionDialogVisible = false;
                this.beAnsweredUsername = '';
                list({bugId: bug.id, murmur: getMurmur(), username: getUsername()}).then((res) => {
                    if (res.code === 0) {
                        let detail = {};
                        this.detailId = bug.id;
                        this.detailTitle = bug.title;
                        detail.username = bug.username;
                        detail.title = bug.title;
                        detail.content = bug.content;
                        detail.nickname = bug.nickname;
                        detail.userAction = '「' + bug.nickname + '」于 ' + bug.createTimeStr + '提出该问题';
                        this.detailList.push(detail);

                        let data = res.data;
                        if (data.length > 0) {
                            for (let i = 0; i < data.length; i++) {
                                let detailAnswered = {};
                                detailAnswered.id = data[i].id;
                                detailAnswered.username = data[i].username;
                                detailAnswered.content = data[i].content;
                                detailAnswered.userAction = '「' + data[i].nickname + '」于 ' + data[i].createTimeStr + ' 回复' + '「' + data[i].beAnsweredNickname + '」';
                                detailAnswered.acceptNum = data[i].acceptNum;
                                detailAnswered.rejectNum = data[i].rejectNum;
                                detailAnswered.currentHasAccept = data[i].currentHasAccept;
                                detailAnswered.currentHasReject = data[i].currentHasReject;
                                detailAnswered.nickname = data[i].nickname;
                                detailAnswered.beAnsweredNickname = data[i].beAnsweredNickname;
                                this.detailList.push(detailAnswered);
                            }
                        }
                        this.detailDialogVisible = true;
                    }
                })
            },
            wechatLogin() {
                alert("微信登录")
            },
            giteeLogin() {
                alert("gitee登录")
            },
            login() {
                this.loginDialogVisible = true;
            },
            register() {
                this.loginDialogVisible = false;
                this.registerDialogVisible = true;
            },
            onSubmit(formName) {
                this.getMurmur();
                // 为表单绑定验证功能
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        login(this.form).then((res) => {
                            if (res.code === 0) {
                                this.loading = true;
                                // ElNotification({
                                //     title: 'Success',
                                //     message: res.msg,
                                //     type: 'success',
                                //     duration: 1000
                                // }),
                                // this.loginHidden = 'none';
                                // this.messageHidden = '';
                                // this.loginDialogVisible = false;
                                // setToken(res.data.token);
                                // setUsername(res.data.username)
                            }
                        })
                    } else {
                        this.loginDialogVisible = true;
                        return false;
                    }
                });

            },
            registerAndLogin(formName) {
                // 为表单绑定验证功能
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        register(this.registerForm).then((res) => {
                            if (res && res.code === 0) {
                                ElNotification({
                                    title: 'Success',
                                    message: res.msg,
                                    type: 'success',
                                    duration: 1000
                                })
                                this.loginHidden = 'none';
                                this.messageHidden = '';
                                this.loginDialogVisible = false;
                                this.registerDialogVisible = false;
                                setToken(res.data.token);
                                setUsername(res.data.username)
                            }
                        })
                    } else {
                        this.registerDialogVisible = true;
                        return false;
                    }
                });

            },

            logout() {
                logout({"username": getUsername()}).then((res) => {
                    if (res.code === 0) {
                        ElNotification({
                            title: 'Success',
                            message: res.msg,
                            type: 'success',
                            duration: 1000
                        }),
                            this.loginHidden = '';
                        this.messageHidden = 'none';
                        removeToken();
                        this.toHome()
                    }
                })
            },
            handleNodeClick(data, node, obj) {
                if (this.pageListCondition.category === data.id) {
                    this.pageListCondition.category = null;
                    this.getCategoryTree();
                } else {
                    if (data.parentId !== 0) {
                        this.pageListCondition.category = data.id;
                        this.bugPageList();
                    }
                }

            }
        }
    }
</script>

<style>
    .pointer {
        cursor: pointer
    }

    .icon {
        padding-left: 20px;
    }

    .icon:hover {
        color: rgb(81, 255, 0);
    }

    .common-layout .el-header {
        background-color: #545c64;
        text-align: left;
        color: white;
        height: 50px;
        line-height: 50px;
    }

    .common-layout .el-footer {
        background-color: whitesmoke;
        color: #2c3e50;
        text-align: left;
        height: 250px;

    }

    .common-layout .el-aside {
        background-color: white;
        width: 20%;
    }

    .common-layout .el-main {
        background-color: white;

        padding-top: 10px;
    }

    .footer {
        margin: 15px;
    }

    .box-card {
        margin: 10px;
    }

    .card-header {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        text-align: left;
    }

    .infinite-list {
        height: 800px;
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .infinite-list .infinite-list-item {
        flex-direction: column;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        margin: 10px;
        color: #2c3e50;
    }

    .infinite-list .infinite-list-item + .list-item {
        margin-top: 10px;
    }

    .el-drawer__header {
        text-align: left;
        font-size: 30px;
    }

    .el-timeline-item__timestamp {
        text-align: left;
    }

    .bugdetail {
        text-align: left;
        text-indent: 35px;
    }

    .el-dialog {
        text-align: center;
    }

    #question_title {
        margin-bottom: 5px;
        font-size: 40px;
        height: 70px;
        width: 100%;
    }

    #question_description {
        height: 800px;
    }

    #answer_question {
        height: 400px;
    }

    .el-col {
        border: 1px solid transparent;
    }
</style>
